import { Feature } from 'ol'
import { Circle as GeomCircle, LineString, Point, Polygon } from 'ol/geom'
import { Fill, Icon, Stroke, Style as StyleVector, Style } from 'ol/style'
import { Vector as SourceVector } from 'ol/source'
import LayerVector from 'ol/layer/Vector'
import { transform } from 'ol/proj'

export const createPointLayer = (lng: number, lat: number, icon: any) => {
  let iconFeature = new Feature({
    geometry: new Point([lng, lat])
  })
  // 创建图标样式
  let iconStyle = new Style({
    image: new Icon({
      // 定义图标锚点
      anchor: [24, 0],
      anchorOrigin: 'bottom-left',
      anchorXUnits: 'pixels',
      anchorYUnits: 'pixels',
      src: icon,
      width: 48,
      height: 48,
      size: [48, 48]
    })
  })
  // 样式加载到图标
  iconFeature.setStyle(iconStyle)
  // 图标添加进矢量容器
  let vectorSource = new SourceVector({
    features: [iconFeature]
  })
  // 创建矢量图层
  return new LayerVector({
    source: vectorSource
  })
}
export const createLayer1 = (center: any, radius: number) => {
  // 转化（以为米画圆）
  let circleIn3857 = new GeomCircle(transform(center, 'EPSG:4326', 'EPSG:3857'), radius, 'XY')
  let circleIn4326 = circleIn3857.transform('EPSG:3857', 'EPSG:4326')
  const circle = new Feature(circleIn4326)
  // 创建一个中心为[0, 0]，半径为1的圆形
  // const circle = new Feature(new GeomCircle([0, 0], 1))
  // 配置样式
  circle.setStyle(
    new StyleVector({
      stroke: new Stroke({
        color: '#AACC33',
        width: 5
      })
    })
  )
  const source = new SourceVector()
  // 把圆形添加到 source 中
  source.addFeature(circle)
  return new LayerVector({
    source: source
  })
}

export const createLayer2 = (gpsPath: any, start: boolean) => {
  // 在包一层
  const polygon = new Feature(new Polygon([gpsPath]))
  // const polygon = new Feature({ geometry: new Polygon([gpsPath]) })
  // 配置样式
  if (start) {
    polygon.setStyle(
      new StyleVector({
        stroke: new Stroke({
          color: '#3333ff',
          width: 5
        }),
        fill: new Fill({
          color: 'rgba(51, 51, 255, 0.5)'
        })
      })
    )
  } else {
    polygon.setStyle(
      new StyleVector({
        stroke: new Stroke({
          color: '#00cc00',
          width: 5
        }),
        fill: new Fill({
          color: 'rgba(0, 204, 0, 0.5)'
        })
      })
    )
  }
  const source = new SourceVector()
  source.addFeature(polygon)
  return new LayerVector({
    source: source
  })
}
export const createLayer3 = (gpsPath: any) => {
  const line = new Feature({
    geometry: new LineString(gpsPath)
  })
  // 配置样式
  line.setStyle(
    new Style({
      stroke: new Stroke({
        color: '#ff0000',
        width: 5
      })
    })
  )
  const source = new SourceVector()
  // 添加线到 source
  source.addFeature(line)
  return new LayerVector({
    source: source
  })
}

export function createPoint(routes: [number, number], icon: any){
  const feature = new Feature(new Point(routes))
  feature.setStyle(new Style({
    image: new Icon({
      // 定义图标锚点
      anchor: [24, 0],
      anchorOrigin: 'bottom-left',
      anchorXUnits: 'pixels',
      anchorYUnits: 'pixels',
      src: icon,
      width: 48,
      height: 48,
      size: [48, 48]
    })
  }))
  return feature
}


/**
 * 创建线条
 * @param routes
 * @param {color, width}
 */
export function createLineLayer(routes: [number, number][], { color, width }: {color: string, width: number }) {
  const feature =  new Feature(new LineString(routes))
  feature.setStyle(new Style({
    stroke: new Stroke({
      color,
      width
    })
  }))
  return feature
}

/**
 * 创建不规则图形
 * @param routes
 * @param {color, width, fill}
 */
export function createIrregularGraphicsLayer(routes: [number, number][][], {color, width, fill }: {color: string, width: number, fill: string}){
  const feature = new Feature(new Polygon(routes))

  feature.setStyle(new StyleVector({
    stroke: new Stroke({
      color,
      width
    }),
    fill: new Fill({
      color: fill
    })
  }))

  return feature
}
